<template>
  <VueDraggableResizable v-if="suspensionState" class="suspension">
    <el-button
      class="suspension__icon"
      icon="el-icon-view"
      circle
      @click="unfold = !unfold"
    />
    <i
      class="suspension__action el-icon-copy-document"
      @click="suspensionState = !suspensionState"
    />
    <transition name="suspension">
      <el-card v-if="unfold" :body-style="{ padding: '0 10px' }">
        <el-tabs v-model="activeName">
          <el-tab-pane label="组件配置" name="组件配置">
            <el-scrollbar style="height: 100%">
              <WidgetsConfig />
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane label="模板配置" name="模板配置">
            <el-scrollbar style="height: 100%">
              <TemplatesConfig />
            </el-scrollbar>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </transition>
  </VueDraggableResizable>

  <div v-else class="unsuspension">
    <i
      class="unsuspension__action el-icon-copy-document"
      @click="suspensionState = !suspensionState"
    />
    <el-tabs v-model="activeName">
      <el-tab-pane label="组件配置" name="组件配置">
        <el-scrollbar style="height: 100%">
          <WidgetsConfig />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="模板配置" name="模板配置">
        <el-scrollbar style="height: 100%">
          <TemplatesConfig />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
import WidgetsConfig from '@/components/Widgets/DynamicConfig'
import TemplatesConfig from '@/components/Templates/DynamicConfig'

export default {
  components: {
    VueDraggableResizable,
    WidgetsConfig,
    TemplatesConfig
  },
  data() {
    return {
      suspensionState: false,
      unfold: true,
      activeName: '组件配置'
    }
  }
}
</script>

<style lang="scss" scoped>
.suspension {
  width: 350px !important;
  height: auto !important;
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 9999 !important;
  &__icon {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 999;
  }
  &__action {
    font-size: 22px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    cursor: pointer;
  }
}
.unsuspension {
  width: 320px;
  position: relative;
  padding: 0 5px;
  &__action {
    font-size: 22px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    cursor: pointer;
  }
}

/deep/.el-tabs {
  &__header {
    margin: 0;
  }
  &__item {
    width: 50% !important;
    height: 50px !important;
    line-height: 50px !important;
    text-align: center;
  }
  &__nav {
    width: 100%;
  }
  .el-scrollbar .el-scrollbar__wrap {
    max-height: calc(100vh - 50px);
  }
}

.suspension-enter-active {
  animation: scale-in-tr 0.3s;
}
.suspension-leave-active {
  animation: scale-in-tr 0.3s reverse;
}
@keyframes scale-in-tr {
  0% {
    transform: scale(0);
    transform-origin: 100% 0;
    opacity: 1;
  }
  100% {
    transform: scale(1);
    transform-origin: 100% 0;
    opacity: 1;
  }
}
</style>
